<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标经过图片显示大图</title>
</head>
<link type="text/css" rel="stylesheet" href="../static/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="../static/css/main.css">
<script type="text/javascript" src="../static/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/js/jquery-3.6.0.min.js"></script>
<body>
<div class="container main">
    <div id="head"></div>
    <script type="text/javascript">
        $("#head").load("../common/head.html");
    </script>
    <div class="container page_nine">
        <div>
            <h3>鼠标经过图片显示大图(Hoverbox Image Gallery)</h3>
            <ul class="page_nine_hover_box">
                <li><a href="#"><img src="../static/img/photo01.jpg" alt="description" class="preview"/><img src="../static/img/photo01.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo02.jpg" alt="description" class="preview"/><img src="../static/img/photo02.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo03.jpg" alt="description" class="preview"/><img src="../static/img/photo03.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo04.jpg" alt="description" class="preview"/><img src="../static/img/photo04.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo05.jpg" alt="description" class="preview"/><img src="../static/img/photo05.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo06.jpg" alt="description" class="preview"/><img src="../static/img/photo06.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo07.jpg" alt="description" class="preview"/><img src="../static/img/photo07.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo08.jpg" alt="description" class="preview"/><img src="../static/img/photo08.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo09.jpg" alt="description" class="preview"/><img src="../static/img/photo09.jpg"
                                                                                                   alt="description"/></a>
                </li>
                <li><a href="#"><img src="../static/img/photo10.jpg" alt="description" class="preview"/><img src="../static/img/photo10.jpg"
                                                                                                   alt="description"/></a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>